<script setup>
import { onMounted } from "vue";
import { useStore } from "@/store";
import { storeToRefs } from "pinia";

const store = useStore();
const { percent } = storeToRefs(store);

console.log(percent);
onMounted(() => {
  import("@/model");
});
</script>

<template>
  <div id="three"></div>
  <div class="model-overlay" v-if="percent > -1 && percent < 100">
    <div class="model-percent">
       <el-progress   :stroke-width="10" :percentage="percent" />
    </div>
  </div>
</template>

<style scoped>
.model-overlay {
  position: fixed;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  overflow: auto;
  z-index: 2000;
}
.model-percent{
  position: absolute;
  top: 50%;
  left: 50%;
  min-width: 400px;
  transform: translate(-50%, -50%);
}
</style>
